<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市联动</title>
	</head>
	<body>
		<div align="center">
			城市：
			<select id="pro">
				<option>请选择</option>
			</select>
			<select id="city">
				<option>请选择</option>
			</select>
		</div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 定义省份的数据
		var proList = ["北京","山西","山东","河北","河南"];
		// 定义城市的数据
		var cityList = [
		           ["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
		           ["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
		           ["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
		           ["石家庄市","邢台市","保定市"],
		           ["郑州市","焦作市","三门峡市"],
		         ];
		
		// 1. 填充省份下拉框的数据 append() 在元素的内部的后面追加子元素
		// 遍历省份的数组
		for (var i = 0; i < proList.length; i++) {
			// 准备对应的省份下拉框选项标签
			var opt = "<option value='"+i+"'>"+proList[i]+"</option>";
			// 将选项追加省份下拉框中
			$("#pro").append(opt);
		}
		
		
		// 2. 绑定省份下拉框的改变值事件 change
		$("#pro").change(function(){
			
			// 设置城市下拉框数据之前，先清空城市下拉选项的值
			$("#city").html("<option>请选择</option>");
			
			// 得到下拉框被选中的选项的索引值 selectIndex
			console.log($(this).val());
			// 获取指定省份对应的城市数组
			var citys = cityList[$(this).val()];
			console.log(citys);
			// 循环遍历城市数组
			for (var i = 0; i < citys.length; i++) {
				var opt = "<option>"+citys[i]+"</option>";
				// 将选项追加城市下拉框中
				$("#city").append(opt);
			}
		});
		
	</script>
	
</html>
